<template>
  <div style="width: 100%">
    <div style="box-shadow: #fff 20px -3px 17px 1px;">
      <div style="float: left;height: 60px;padding: auto 0;color: white;margin-left: 20px;">
        <div style="line-height: 60px;">
          <i class="el-icon-s-unfold fontColor"></i>
          <span slot="title" class="fontColor"> 企业项目管理系统</span>
<!--          <i class="el-icon-s-order fontColor"></i>-->
<!--        <span slot="title" class="fontColor"> 我 申 请 的</span>-->
      </div>
      </div>
      <div style="margin:0 auto;width: 206px;">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#2a2d2f"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="border-bottom: none;display: inline-block">
          <el-menu-item index="1">我的项目</el-menu-item>
          <el-menu-item index="2">项目回收站</el-menu-item>
<!--          <el-menu-item index="1">待审批</el-menu-item>-->
<!--          <el-menu-item index="2">已审批</el-menu-item>-->
<!--          <el-menu-item index="3">我参与的</el-menu-item>-->
<!--          <el-menu-item index="4">我创建的</el-menu-item>-->
        </el-menu>
      </div>
<!--      <el-menu-->
<!--        :default-active="activeIndex2"-->
<!--        class="el-menu-demo"-->
<!--        mode="horizontal"-->
<!--        @select="handleSelect"-->
<!--        background-color="#2a2d2f"-->
<!--        text-color="#fff"-->
<!--        active-text-color="#ffd04b"-->
<!--        style="border-bottom: none;display: inline-block">-->
<!--&lt;!&ndash;                  <el-menu-item index="1">我的项目</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;                  <el-menu-item index="2">项目回收站</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-menu-item index="1">活动任务</el-menu-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-menu-item index="2">完成任务</el-menu-item>&ndash;&gt;-->
<!--      </el-menu>-->
<!--    </div>-->
<!--    <div style="padding:15px;">-->
<!--      <div style="background-color: white;">-->
<!--        <div class="clearfix">-->
<!--          <el-input-->
<!--            class="searchDepartment"-->
<!--            placeholder="搜索项目"-->
<!--            prefix-icon="el-icon-search"-->
<!--            v-model="input2"-->
<!--            style="margin: 15px 15px;width: 250px;float: left">-->
<!--          </el-input>-->
<!--          <span style="font-size: 14px;float: left;margin-top: 25px;">共 {{projectNumber}} 个项目</span>-->
<!--          <el-button style="float: right; margin:15px 15px" type="primary"><i class="el-icon-plus"></i> 新 建</el-button>-->
<!--          <el-select v-model="value" placeholder="请选择" style="float: right;margin-top: 15px;width: 110px">-->
<!--            <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->
<!--        <div style="margin: 0 15px;">-->
<!--          <el-table-->
<!--            :data="tableData"-->
<!--            stripe-->
<!--            style="width: 100%;"-->
<!--            :header-cell-style="{background:'#eef1f6',color:'#606266'}">-->
<!--            <el-table-column-->
<!--              prop="name"-->
<!--              label="项目名称">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="process"-->
<!--              label="任务进度">-->
<!--              <template slot-scope="scope">-->
<!--                <el-progress :percentage="scope.row.process" :color="customColors"></el-progress>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="date"-->
<!--              label="创建时间">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->




<!--    <div style="padding:15px;">-->
<!--      <div style="background-color: white;">-->
<!--        <div class="clearfix">-->
<!--          <el-input-->
<!--            class="searchDepartment"-->
<!--            placeholder="输入编号、类型或申请人"-->
<!--            prefix-icon="el-icon-search"-->
<!--            v-model="input2"-->
<!--            style="margin: 15px 15px;width: 250px;float: left">-->
<!--          </el-input>-->
<!--        </div>-->
<!--        <div style="margin: 0 15px;">-->
<!--          <el-table-->
<!--            :data="tableData"-->
<!--            stripe-->
<!--            style="width: 100%;"-->
<!--            :header-cell-style="{background:'#eef1f6',color:'#606266'}">-->
<!--            <el-table-column-->
<!--              prop="name"-->
<!--              label="审批编号">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="process"-->
<!--              label="申请人">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="date"-->
<!--              label="申请时间">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="date"-->
<!--              label="审批状态">-->
<!--              <el-tag type="warning">待审批</el-tag>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <div style="padding:15px;">
      <div style="background-color: white;">
        <div class="clearfix">
          <el-input
            class="searchDepartment"
            placeholder="搜索项目"
            prefix-icon="el-icon-search"
            v-model="input2"
            style="margin: 15px 15px;width: 250px;float: left">
          </el-input>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </div>
        <div style="margin: 0 15px;">
          <el-table
            :data="tableData1"
            stripe
            border
            style="width: 100%;"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column
              prop="number"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="name"
              label="项目名称">
            </el-table-column>
            <el-table-column
              prop="mission"
              label="任务数">
            </el-table-column>
            <el-table-column
              prop="cp"
              label="创建人">
            </el-table-column>
            <el-table-column
              prop="dp"
              label="删除人">
            </el-table-column>
            <el-table-column
              prop="date"
              label="删除时间">
            </el-table-column>
            <el-table-column
              prop="operate"
              label="操作">
              <template slot-scope="scope">
                <el-icon
                  class="el-icon-refresh-right"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-icon>
                <el-icon
                  class="el-icon-close"
                  @click="handleEdit(scope.$index, scope.row)" style="margin-left: 10px">编辑</el-icon>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "AllProjects",
      data() {
        return {
          activeIndex: '1',
          activeIndex2: '1',
          projectNumber: '5',
          input2: '',
          value: '0',
          options: [{
            value: '0',
            label: '全部项目'
          }, {
            value: '1',
            label: '公有项目'
          }, {
            value: '2',
            label: '私有项目'
          },],
          tableData: [{
            // 20210318152640721
            name: '企业项目管理系统',
            process: 20,
            date: '2021.3.20'
          }, {
            // 20210319164058712
            name: '旺达广场',
            process: 40,
            date: '2021.3.25'
          }, {
            // 20210319185264875
            name: 'VR全景',
            process: 60,
            date: '2021.4.1'
          }, {
            // 20210325054874516
            name: '招聘网',
            process: 20,
            date: '2021.4.4'
          },
          {
            // 202103260785468514
            name: '宠物管家',
            process: 20,
            date: '2021.4.4'
          }],
          customColors: [
            {color: '#f56c6c', percentage: 20},
            {color: '#e6a23c', percentage: 40},
            {color: '#5cb87a', percentage: 60},
            {color: '#1989fa', percentage: 80},
            {color: '#6f7ad3', percentage: 100}
          ],
          tableData1: [{
            number: '1',
            name: '招聘网',
            mission: '0',
            cp: '陈咏博',
            dp: '陈小春',
            date: '2021.3.20',
          }, {
            number: '2',
            name: '旺达电影院',
            mission: '20',
            cp: '王小虎',
            dp: '陈三世',
            date: '2021.3.25',
          }, {
            number: '3',
            name: '吃鸡手游',
            mission: '3',
            cp: '小光',
            dp: '陈咏博',
            date: '2021.4.1',
          }, {
            number: '4',
            name: '养成手游',
            mission: '18',
            cp: '王小虎',
            dp: '陈三世',
            date: '2021.4.3',
          },
            {
              number: '5',
              name: '3A单机大作',
              mission: '14',
              cp: '曾小城',
              dp: '陈咏博',
              date: '2021.4.4',
            }]
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style scoped>
  .clearfix::before,
  .clearfix::after {
    content: "";
    display: table;
  }
  .clearfix::after {
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }
</style>
